<template>
	<view v-if="list" class="content">
		<view class="hei20"></view>
		<view class="wid90 mar dis disAl disJuC borRad20 bacFFF" @click.stop="is_address = true" style="height: 134rpx">
			<view class="wid90 mar dis disAl disJuB ">
				<view class="wid90 dis disAl">
					<image src="../../static/imgs/icon/weizhi2.png" 
						style="width: 34rpx;height: 44rpx;" class="mar-right20"></image>
					<view v-if="!address_sb.username">请填写收货地址</view>
					<view v-else>
						<view class="foSi30 fowe600">{{ person.province }} {{ person.city }} {{ person.area }} {{ address }}</view>
						<view class="foSi25 mar-top10" style="color: #969696;">{{ tel }} {{ username }}</view>
					</view>
				</view>
				<i class="fa fa-angle-right" />
			</view>
		</view>
		<view class="hei20"></view>
		<view class="wid90 mar borRad20 bacFFF mar-top20" style="padding: 20rpx 0;">
			<view class="wid90 mar dis disAl">
				<view style="width: 30%;height: 140rpx;">
					<image :src="url+list.cover_img" class="hei100" style="width: 140rpx;"></image>
				</view>
				<view class="wid70">
					<view class=" dis disAl disJuB">
						<view class="foSi30 fowe600">{{list.title}}</view>
						<view class="foSi28" style="color: #686868;">x 1</view>
					</view>
					<view class="foSi30 fowe600" style="text-align: right;color: #3978F9;margin-top: 60rpx;">{{list.price}}积分</view>
				</view>
			</view>
			<view class="wid90 mar mar-top20">
				<view class="wid100 dis disAl disJuB hei60">
					<view class="fowe600 foSi28">选择优惠券</view>
					<view class="foSi24" style="color: #A3A3A3;">无可用</view>
				</view>
				<view class="wid100 dis disAl disJuB hei60">
					<view class="dis disAl fowe600">
						<view class="foSi28">运费</view>
						<view class="mar-left10 foSi25" style="color: #C01713;">免运费</view>
					</view>
					<view class="foSi24" style="color: #A3A3A3;">¥0.00</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 bacFFF borRad20" style="padding: 20rpx 0;">
			<view class="dis disAl disJuB hei60" @click.stop="set_payment(0)" style="padding: 20px;">
				<view class="dis disAl">
					<image src="../../static/imgs/icon/jifei.png" style="width: 41rpx;height: 40rpx;"></image>
					<view class="fowe600 mar-left20">积分支付</view>
				</view>
				<image v-if="paymentWay !== 0" src="../../static/imgs/icon/xuan.png" style="width: 30rpx;height: 30rpx;"></image>
				<image v-if="paymentWay === 0" src="../../static/imgs/icon/xuan1.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
			<view class="dis disAl disJuB hei60" @click.stop="set_payment(1)" style="padding: 20px;">
				<view class="dis disAl">
					<image src="../../static/imgs/icon/weixin.png" style="width: 38rpx;height: 31rpx;"></image>
					<view class="fowe600 mar-left20">微信支付</view>
				</view>
				<image v-if="paymentWay !== 1" src="../../static/imgs/icon/xuan.png" style="width: 30rpx;height: 30rpx;"></image>
				<image v-if="paymentWay === 1" src="../../static/imgs/icon/xuan1.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
			<view class="dis disAl disJuB hei60" @click.stop="set_payment(2)" style="padding: 20px;">
				<view class="dis disAl">
					<image src="../../static/imgs/icon/yue.png" style="width: 36rpx;height: 37rpx;"></image>
					<view class="fowe600 mar-left20">余额支付</view>
				</view>
				<image v-if="paymentWay !== 2" src="../../static/imgs/icon/xuan.png" style="width: 30rpx;height: 30rpx;"></image>
				<image v-if="paymentWay === 2" src="../../static/imgs/icon/xuan1.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view v-if="is_address" class="wh100 poAbs zhezhao">
			<view class="wh100 dis disAl disJuC">
				<view class="bacFFF borRad20" style="padding: 40rpx 0;width: 666rpx;">
					<view class="wid87 mar foSi30">
						<view class="dis disAl disJuB hei80">
							<view class="fowe600">姓名</view>
							<input style="text-align: right;" v-model="username" placeholder="请输入姓名" />
						</view>
						<view class="dis disAl disJuB hei80">
							<view class="fowe600">手机号</view>
							<input style="text-align: right;" v-model="tel" placeholder="请输入手机号" />
						</view>
						<view class="dis disAl disJuB hei80">
							<view class="fowe600">选择地址</view>
							<picker mode="multiSelector" @change="okReginon" @columnchange="bindMultiPickerColumnChange"
								:value="regionIndex" :range="region">
								<view v-if="person.province" class="inp">{{person.province}} {{person.city}} {{person.area}}
								</view>
								<view v-else style="color: #808080;">请选择地址</view>
							</picker>
						</view>
						<view class="dis disAl disJuB hei80">
							<view class="fowe600">详细地址</view>
							<input style="text-align: right;" v-model="address" placeholder="请输入详细地址" />
						</view>
					</view>
					<view class="mar-top30 dis disAl disJuC borRad10 hei60 coFFF mar" 
						style="background: #3978F9;width: 220rpx;" @click.stop="setAddress">保存</view>
				</view>
			</view>
		</view>
		
		<view style="height: 120rpx;" :style="'padding-bottom: '+(bottomHight - 20)+'px;'"></view>
		<view class="wid100 bacFFF poFix" style="bottom: 0;">
			<view class="wid90 mar dis disAl disJuB" style="height: 120rpx;">
				<view class="foSi35 fowe800 dis disAl">
					<view>支付金额：</view>
					
					<view  style="color: #3978F9;">
						<view>{{pricemsg}}</view>
					</view>
				</view>
				<view class="hei80 borRad40 dis disAl disJuC foSi30 coFFF" 
					style="background-color: #035DFF;width: 232rpx;" @click="duihuan()">支付</view>
			</view>
			<view v-if="bottomHight != 0" :style="'height: '+(bottomHight - 20)+'px;'"></view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module');
	import provinceData from '../../static/region.json';
	import { Goods } from '../../model/integralgoods-model';
	import { Config } from '../../utils/config.js';
	var Goods2 = new Goods()
	export default {
		data() {
			return {
				url: Config.restUrl,
				paymentWay: 0,
				bottomHight: 0,
				list: null,
				// 省市区选择器
				region: [
					[],
					[],
					[],
				],
				regionIndex: [0, 0, 0],
				id: 0,
				username: '',
				tel: '',
				address: '',
				person: {
					province: null,
					city: null,
					area: null
				},
				is_address: false,
				moneyset:{}, // 余额设置
				address_sb:{},
				pricemsg:''
			}
		},
		onLoad(option) {
			let app = uni.getSystemInfoSync();
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
			this.id = option.id
			this.getList()
			this.addressData()
			this.getmoney()
		},
		methods: {
			set_payment(set){
				this.paymentWay = set
				if(set == 0){
					console.log(this.moneyset)
					// 设置微信支付
					this.pricemsg = this.moneyset.need_integral + '积分'
				}else if(set == 1){
					console.log(this.moneyset.need_money)
					this.pricemsg = this.moneyset.need_money + '元'
				}else if(set == 2){
					if(parseFloat(this.moneyset.need_money) > parseFloat(this.moneyset.user_money)){
						uni.showToast({
							title:'余额不足将使用微信支付',
							icon:'none'
						})
					
						this.pricemsg = this.moneyset.user_money +'+'+ this.moneyset.need_weixin +'元'
					}else{
						this.pricemsg = this.moneyset.need_money + '元'
					}
				}
				// if()
			},
			getmoney(){
				var that = this
				let params = {
					goodsid: that.id
				}
				Goods2.getexchange((data) => {
					console.log(data)
					if (data.code === 1) {
						that.moneyset = data.data
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, params)
			},
			setAddress(){
				var that = this
				if(!that.username){
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.tel){
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.person.province){
					return uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.address){
					return uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						duration: 2000
					})
				}
				var address = {
					regionIndex: this.regionIndex,
					username: this.username,
					tel: this.tel,
					province: this.person.province,
					city: this.person.city,
					area: this.person.area,
					address: this.address
				}
				this.address_sb = address
				uni.setStorageSync('address', address)
				this.is_address = false
			},
			addressData(){
				var address = uni.getStorageSync('address')
				provinceData.forEach(item => {
					this.region[0] = [...this.region[0], item.name]
				})
				if(address){
					this.regionIndex = address.regionIndex
					console.log(this.regionIndex)
					provinceData[this.regionIndex[0]].children.forEach(item => {
						this.region[1] = [...this.region[1], item.name]
					})
					provinceData[this.regionIndex[0]].children[this.regionIndex[1]].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
					this.username = address.username
					this.tel = address.tel
					this.address = address.address
					this.person.province = address.province
					this.person.city = address.city
					this.person.area = address.area
					this.address_sb = address
				}else{
					provinceData[0].children.forEach(item => {
						this.region[1] = [...this.region[1], item.name]
					})
					provinceData[0].children[0].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
				}
			},
			getList() {
				var that = this
				let params = {
					id: that.id
				}
				Goods2.goddsDetails((data) => {
					console.log(data)
					if (data.code === 0) {
						that.list = data.data
						that.pricemsg = data.data.price + '积分'
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, params)
			},
			duihuan() {
				var that = this
				// var params2 = {
				// 	id:28
				// }
				
				// Goods2.getMpCxPayOrder((data)=>{
				// 	if(data.code == 1){
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '支付成功',
				// 			showCancel: false,
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					uni.redirectTo({
				// 						url: '/pages/user/pointsExchange'
				// 					})
				// 				}
				// 			}
				// 		})
				// 	}else{
				// 		uni.showToast({
				// 			title: '支付失败',
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	}
				// },params2)
				// return false
				
				if(!that.username){
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.tel){
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.person.province){
					return uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					})
				}
				if(!that.address){
					return uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						duration: 2000
					})
				}
				
				var paytype = ''
				if(that.paymentWay == 0){
					paytype = 1
				}else if(that.paymentWay == 1){
					paytype = 3
				}else if(that.paymentWay == 2){
					paytype = 2
				}
				let params = {
					goodsid: that.id,
					username: that.username,
					tel: that.tel,
					province: that.person.province,
					city: that.person.city,
					area: that.person.area,
					address: that.address,
					paymentWay: paytype
				}
				console.log(params)
				
				Goods2.exchange((data) => {
					console.log(data)
					if (data.code === 0) {
						if(data.data.need_wx_pay == 1){
							jweixin.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: data.data.wx_pay_info.appId, // 必填，公众号的唯一标识
								timestamp: data.data.wx_pay_info.timeStamp, // 必填，生成签名的时间戳
								nonceStr: data.data.wx_pay_info.nonceStr, // 必填，生成签名的随机串
								signature: data.data.wx_pay_info.paySign, // 必填，签名
								jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
							})
							jweixin.ready(function() {
								jweixin.chooseWXPay({
									appId: data.data.wx_pay_info.appId,
									package: data.data.wx_pay_info.package, //
									timestamp: data.data.wx_pay_info.timeStamp, // 时间戳
									nonceStr: data.data.wx_pay_info.nonceStr, // 随机数
									signType: data.data.wx_pay_info.signType,
									paySign: data.data.wx_pay_info.paySign, // 签名
									success: function() {
										// 支付成功(查询支付状态)
										var params = {
											id:data.data.id
										}
										
										Goods2.getMpCxPayOrder((data)=>{
											if(data.code == 1){
												uni.showModal({
													title: '提示',
													content: '支付成功',
													showCancel: false,
													success: function(res) {
														if (res.confirm) {
															uni.redirectTo({
																url: '/pages/user/pointsExchange'
															})
														}
													}
												})
											}else{
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 2000
												})
											}
										},params)
										
									},
									cancel: function() {
										// 支付失败
										console.log(res)
										uni.showToast({
											title: '取消支付',
											icon: 'none',
											duration: 2000
										})
									},
									fail: function() {
										// 支付失败
										console.log(res)
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										})
									}
								})
							})
						}else{
							uni.showToast({
								title: '兑换成功',
								icon: 'none',
								duration: 2000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/user/pointsExchange'
								})
							}, 1000);
							
						}
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}, params)
			},
			okReginon(e) {
				console.log(e.detail.value)
				this.regionIndex = e.detail.value
				this.person.province = this.region[0][this.regionIndex[0]]
				this.person.city = this.region[1][this.regionIndex[1]]
				this.person.area = this.region[2][this.regionIndex[2]]
			},
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				console.log(this.region[e.detail.column][e.detail.value])
				// 省
				if (e.detail.column == 0) {
					this.regionIndex[0] = e.detail.value
					this.region[1] = []
					this.region[2] = []
					provinceData[e.detail.value].children.forEach(item => {
						this.region[1] = [...this.region[1], item.name]
					})
					provinceData[this.regionIndex[0]].children[0].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
				}
				// 市
				else if (e.detail.column == 1) {
					console.log(this.regionIndex[0])
					this.regionIndex[1] = e.detail.value
					this.region[2] = []
					provinceData[this.regionIndex[0]].children[e.detail.value].children.forEach(item => {
						this.region[2] = [...this.region[2], item.name]
					})
				} else {
					this.regionIndex[2] = e.detail.value
				}
				this.$forceUpdate()
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #F8F9FD;
		height: 100vh;
	}
</style>